<template>
  <div>
    <router-link to="/myself">
        <span style="float:left" @click="blacklist=false;Topshow=true;alltext=true">
            <b>
                <i style="padding:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
            </b>
        </span>
    </router-link>
    <router-view></router-view>
    <h3 style="text-align: center;padding:0.2rem">
        <b>我的喜欢</b>
    </h3>
    <div>
        <div class="contain_contain">
            <div class="post" v-for="(likeli,index) in likelist" :key="index">
                <div class="top">
                    <a href="javascript:;">
                        <van-image  
                            width="1rem" 
                            height="1rem" 
                            radius="100%" 
                            fit="cover" 
                            :src="likeli.img" 
                        />
                        <p>
                            {{likeli.nickname}}
                        </p>
                        <p class="likeId" style="display:none">
                            {{likeli.likeId}}
                        </p>
                        <p class="bodyId" style="display:none">
                            <!-- 帖子id -->
                            {{likeli.bodyId}}
                        </p>
                    </a>
                    <van-popover class="hhhh"  style="margin-right: 0rem;"
                    v-model="showPopover"
                    trigger="click"
                    placement="bottom-end"
                    >   
                    <div class="list">
                        <ul>
                            <li @click="deletelikelis(index)">取消点赞</li>
                        </ul>
                    </div>
                    <template #reference>
                        <van-button  style="width: 1rem;height: 0.8rem;margin-right: 0rem;border:none">
                            <i style="margin-right: 0rem;" class="iconfont icon-gengduo"></i>
                        </van-button>
                    </template>
                    </van-popover>
                </div>
                <div class="font">
                    {{likeli.content}}
                </div>
                <div class="pic">
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                </div>
            </div>
        </div>
    </div>
    <p id="userid" style="display:none"></p>

  </div> 
</template>

<script>

import Report from '../common/post/Report.vue'
import Talk from '../common/post/Talk.vue'
import Like from '../common/post/Like.vue'
import Love from '../common/post/Love.vue'
import axios from 'axios'
import jwtDecode from 'jwt-decode'

export default {
    name:'Mylike',
    components:{
      Report,Talk,Like,Love
    },
    methods:{
        //用户进行取消喜欢的操作
        deletelikelis(index){
            console.log(index)
            axios({
                url:`/like/cancelLike?list=${index}`,
                method:'DELETE',
                // params :{
                //     list:arrdeletelist,//传递一个需要删除的数组进去     尚未设置多选可以单独传进去设置成数组形式
                // }
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data => {
                console.log(data)
                this.showPopover=false
                //成功取消点赞之后进行重新遍历我的喜欢列表

                    //遍历用户喜欢列表
                    axios({
                    url:'/like/queryLike',
                    method:'get',
                    params :{
                        userId:30,
                    },
                    headers: {
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                    },
                }).then(data => {
                    //遍历所有喜欢列表

  
                    if(data.data.code==20000){
                        console.log("111111")
                        console.log(data.data.data)
                        this.likelist=data.data.data

                    }else{
                        console.log(data.data.data)
                        console.log("77777777777777777777777")
                    }
                }).catch(err => {
                    console.log(err)
                })

            })
            .catch(err => {
                console.log(err)
            })

        },

        
    },
    data(){
        return{
            showPopover:false,
            likelist:null,
        }
    },
    mounted(){
        if(sessionStorage.length==0){
            console.log("成功登录")
        }else{
            let token=sessionStorage.getItem("token")
            console.log(token)
            //解析token 
            const decode =  jwtDecode(token);
            console.log(decode);
            //赋值用户id
            var userid  = document.getElementById("userid");
            userid.innerHTML=decode.userId;


                //遍历用户喜欢列表
                axios({
                url:'/like/queryLike',
                method:'get',
                params :{
                    userId:30,
                },
                headers: {
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                },
            }).then(data => {
                //遍历所有喜欢列表
                if(data.data.code==20000){
                    console.log("111111")
                    console.log(data.data.data)
                    this.likelist=data.data.data



                }else{
                    console.log(data.data.data)
                    console.log("77777777777777777777777")
                }
            }).catch(err => {
                console.log(err)
            })
        }

    }
}
</script>

<style lang="less" scope>
h3{
  text-align:center;
  padding: 0.2rem;
}
    .post{
        background-color: white;
        padding: 0.25rem;
        margin-bottom: 0.3rem;
        overflow: auto;
        .top{
            display: inline-flex;
            justify-content: space-between;
            flex-direction: row;
            padding-bottom: 0.2rem;
            width: 100%;
            a{
                display: inline-flex;
                align-items: center;
                color: #4b4b4b;
                font-size: 0.4rem;
                p{
                    margin-left: 0.1rem;
                }
            }
            
        }
        .font{
            margin-bottom: 0.2rem;
            font-size: @fontSmall;
        }
        .pic{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            
            .van-image{
                margin-right: 0.15rem;
                margin-bottom: 0.2rem;
            }
            
        }
        .bottom{
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-evenly;
        }
    }

</style>